<template>
  <div class="team-page">
    <h1>{{ t('team.title') }}</h1>
    
    <div class="team-grid">
      <template v-for="i in 6" :key="i">
        <div 
          v-if="team[i-1]" 
          class="pokemon-slot filled"
          @click="goToDetail(team[i-1].id)"
        >
          <el-image :src="team[i-1].sprite" :alt="team[i-1].name" />
          <div class="pokemon-info">
            <h3>{{ team[i-1].name }}</h3>
            <p>Lv.{{ team[i-1].level }}</p>
            <div class="pokemon-types">
              <el-tag
                v-for="type in team[i-1].types"
                :key="type"
                :class="['type', type]"
                effect="dark"
                size="small"
              >
                {{ t(`pokedex.types.${type}`) }}
              </el-tag>
            </div>
          </div>
          <el-button
            class="remove-btn"
            type="danger"
            circle
            size="small"
            @click.stop="removePokemon(team[i-1].id)"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </div>
        <div v-else class="pokemon-slot empty">
          <el-icon><Plus /></el-icon>
          <p>{{ t('team.emptySlot') }}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Delete, Plus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { teamStorage, type TeamPokemon } from '@/utils/team'

const router = useRouter()
const { t } = useI18n()
const team = ref<TeamPokemon[]>([])

const loadTeam = () => {
  team.value = teamStorage.getTeam()
}

const removePokemon = async (id: number) => {
  try {
    await ElMessageBox.confirm(
      t('team.confirmRemove'),
      t('team.warning'),
      { type: 'warning' }
    )
    teamStorage.removePokemon(id)
    loadTeam()
  } catch {
    // 用户取消删除
  }
}

const goToDetail = (id: number) => {
  router.push(`/team/pokemon/${id}`)
}

onMounted(() => {
  loadTeam()
})
</script>

<style scoped lang="scss">
.team-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h1 {
    text-align: center;
    margin-bottom: 40px;
  }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.pokemon-slot {
  aspect-ratio: 1;
  border: 2px dashed var(--el-border-color);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  &.filled {
    border-style: solid;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: translateY(-5px);
    }

    .remove-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    &:hover .remove-btn {
      opacity: 1;
    }
  }

  &.empty {
    color: var(--el-text-color-secondary);
    
    .el-icon {
      font-size: 40px;
      margin-bottom: 10px;
    }
  }
}

.pokemon-info {
  margin-top: 10px;
  text-align: center;

  h3 {
    margin: 5px 0;
    text-transform: capitalize;
  }

  .pokemon-types {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 5px;
  }
}

// 继承原有的类型样式
.type {
  &.grass { background-color: #78c850 !important; }
  &.fire { background-color: #f08030 !important; }
  // ... 其他类型样式
}
</style> 